.content {
    color: #fff;
}

.catalog {
    width         : 20%;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    padding       : 40px 30px 0px 30px;

    .catalog-item {
        padding         : 20px;
        background-color: #ffffff60;
        width           : 150px;
        margin          : 10px;
        text-align      : center;
        cursor          : pointer;
    }

    .catalog-item-s {
        background-color: #00000060;
    }

    // .catalog-item::after {
    //     content         : '';
    // }
}

.main {
    flex   : 1;
    padding: 20px;
}

.main-title {
    background-color: #00000060;
    text-align      : center;
    margin          : 20px;
    padding         : 20px;
}

.main-body:extend(.main-title) {
    text-align      : left;
}


.ac-buttom {
    display         : flex;
    background-color: #00000060;
    align-items     : center;
    padding         : 15px;

    a {
        color: #fff;
    }
}

.play-btn {
    i {
        font-size: 24px;
    }
}

.setting-item {
    padding    : 10px;
    display    : flex;
    align-items: center;

    span {
        margin-right: 20px;
    }
}

.fg {
    color           : #fff;
    background-color: #3a9dde;
    width           : 30px;
    height          : 30px;
    display         : flex;
    border-radius   : 50%;
    justify-content : center;
    align-items     : center;
    margin-right    : 10px;
}

.no-border {
    border          : none;
    background-color: transparent;
    box-shadow      : none;
    color           : #fff;
    text-align      : center;
}